<template>
	<view class="videoList">
		<view class="swiper-box">
			<swiper class="swiper"  :vertical="true" @change="changeplay" @touchstart="touchStart" @touchend="touchEnd">
				<swiper-item>
					<view class="listtopbox">
						<list-top></list-top>
					</view>
					<view class="swiper-item"  style="color: #000000;">
						<video
						id="myVideo" 
						class="video" 
						:controls="false" 
						:src="'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'" 
						:loop="true" 
						:autoplay="autoplay"
						controls
						@click="click"></video>
						<!-- <video-player @changeClick='changeClick' ref="player" :video="item" :index="index"></video-player> -->
					</view>
					<view class="listleftbox">
						<list-left></list-left>
					</view>
					<view class="listrightbox">
						<list-right ref="right"></list-right>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import videoPlayer from '../../components/videoList.vue'
	import listLeft from '../../components/listLeft.vue'
	import listRight from '../../components/listRight.vue'
	import listTop from '../../components/listTop.vue'
	var time = null
	var timer=null
	export default {
		components:{
			videoPlayer,
			listLeft,
			listRight,
			listTop
		},
		data() {
			return {
				videos:[],
				pageStatrY:0,
				pageEndY:0,
				page:0,
				play:false,
				dblClick:false,
				autoplay:false
			};
		},
		mounted(){
			this.videoContext=uni.createVideoContext('myVideo',this)
		},
		created() {
			this.atuo()
		},
		methods:{
			changeClick(){
				//双击点赞 调用子组件listright的方法
				this.$refs.right[0].change()
			},
			//上下滑动触发事件
			changeplay(res){
				clearTimeout(time)
				this.page = res.detail.current
				time=setTimeout(()=>{
					if(this.pageStatrY < this.pageEndY){
						console.log('向上滑动')
						setTimeout(()=>{
							this.$refs.player[this.page].player()
						},20)
						
						this.$refs.player[this.page+1].pause()
						this.pageStatrY=0
						this.pageEndY=0
					}else{
						console.log('向下滑动')
						setTimeout(()=>{
							this.$refs.player[this.page].player()
						},20)
						
						this.$refs.player[this.page-1].pause()
						this.pageStatrY=0
						this.pageEndY=0
					}
				},1)	
			},
			//获取向下滑动的值
			touchStart(res){
				this.pageStatrY = res.changedTouches[0].pageY
				console.log(this.pageStatrY)
			},
			//获取向上滑动的值
			touchEnd(res){
				this.pageEndY = res.changedTouches[0].pageY
				console.log(this.pageEndY)
			},
			click(){
				clearTimeout(timer)
				this.dblClick=!this.dblClick
				timer=setTimeout(()=>{
					if(this.dblClick){ //判断是单击 即为true
						//单击
						if(this.play===false){
							this.playThis()
						}else{
							this.pause()
						}
					}else{
						//双击
						this.$emit('changeClick') //向父组件传递一个事件
					}
					this.dblClick=false //点击后重置状态 重置为false
				},300)
			},
			player(){
				//从头播放视频
				if(this.play===false){
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play=true
				}
			},
			pause(){
				//暂停视频
				if(this.play===true){
					this.videoContext.pause()
					this.play=false
				}
			},
			playThis(){
				//播放当前视频
				if(this.play===false){
					this.videoContext.play()
					this.play=true
				}
			},
			//首个视频自动播放
			atuo(){
				//首个视频自动播放
				if(this.index===0){
					this.autoplay=true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.videoList{
	width: 100%;
	height: 100%;
	.swiper-box{
		width: 100%;
		// #ifdef H5
			height: calc(100vh - 44px);
		// #endif
		// #ifndef H5
			height: 100vh;
		// #endif
		.swiper{
			width: 100%;
			height: 100%;
			.videoPlayer{
				width: 100%;
				height: 100%;
			}
		}
	}
}
.swiper-item{
	height: 100%;
	width: 100%;
	z-index:19;
}
.video{
	height: 100%;
	width:100%;
	z-index: 1;
}
.title{
	color: #FFFFFF;
}
/deep/.listtopbox{
	z-index:21;
	position: absolute;
	top: 10px;
	left: 0;
	width: 100%;
}
/deep/.listleftbox{
	z-index:20;
	position: absolute;
	bottom: 10px;
	left: 10px;
}
/deep/.listrightbox{
	z-index:20;
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: #FFFFFF;
}
</style>

